/* 
    静态属性
        ele
    动态方法
        init()  初始化（获取元素、绑定事件）
        renderList()  渲染列表
*/

class List {
    constructor(ele) {
        this.ele = ele;
        this.init();
    }

    init() {
        //获取元素
        this.container = $('#container');
        this.paginations = $('#pagination');
        //渲染页面
        this.changeCurrent = 1;
        this.renderList();

        //渲染分页器
        this.renderPagination();



    }

    async renderList() {
        this.str = '';
        this.data = await pAjax({
            url: '../json/data11.json'
        });
        this.data = JSON.parse(this.data).Data;
        // console.log(this.data);
        this.data.forEach((item, index) => {
            if (index >= this.changeCurrent - 1 && index <= this.changeCurrent + 6) {
                // console.log(item);
                this.str += `<div class="list" index="${index+1}" WareSkuCode="${item.WareSkuCode}">
                <figure>
                    <a href="javascript:;" title="${item.WareName}"><img src="${item.Pic180}" alt=""></a>
                </figure>
                <figcaption>
                    <h4><a href="javascript:;" title="${item.WareName}">${item.WareName}</a></h4>
                    <p>${item.Advertisement}</p>
                    <p><mark>￥${item.SalePrice}</mark><span>￥${item.MarketPrice}</span></p>
                </figcaption>
            </div>`;
            }
        });
        this.container.html(this.str);
        this.list = $('.list');
        console.log(this.list);
        this.list.on('click', function() {
            let WareSkuCode = this.getAttribute('WareSkuCode');
            console.log(WareSkuCode);
            location.replace(`./details.html?WareSkuCode=${WareSkuCode}`);

        })
    }

    renderPagination() {
        this.paginations.pagination({
            totalData: 420,
            showData: 8,
            coping: true,
            homePage: '首页',
            endPage: '末页',
            prevContent: '上一页',
            nextContent: '下一页',
            current: 1,
            jump: true,
            callback: function(data) {
                console.log(data);
            },
            change: function() {
                console.log(1);
            }
        });
    }
}


new List($('main'));